.router-wrapper {
  overflow: hidden;
}

.forward-from-right-enter {
  z-index: 2;
  transform: translate3d(100%, 0, 0);
}

.forward-from-right-enter-active {
  z-index: 2;
  transform: translate3d(0, 0, 0);
  transition: all 300ms;
}

.forward-from-right-enter-done {
  z-index: 2;
}

.forward-from-right-exit {
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.forward-from-right-exit-active {
  z-index: 1;
  transform: translate3d(-30%, 0, 0);
  transition: all 300ms;
}

.forward-from-right-exit-done {
  z-index: 1;
}

.back-to-right-enter {
  z-index: 1;
  transform: translate3d(-30%, 0, 0);
}

.back-to-right-enter-active {
  z-index: 1;
  transform: translate3d(0%, 0, 0);
  transition: all 300ms;
}

.back-to-right-enter-done {
  z-index: 1;
}

.back-to-right-exit {
  z-index: 2;
  transform: translate3d(0%, 0, 0);
}

.back-to-right-exit-active {
  z-index: 2;
  transform: translate3d(100%, 0, 0);
  transition: all 300ms;
}

.back-to-right-exit-done {
  z-index: 2;
}

.forward-from-bottom-enter {
  z-index: 2;
  opacity: 0;
  transform: translateY(100%);
}

.forward-from-bottom-enter-active {
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
  transition: all 300ms;
}

.forward-from-bottom-exit {
  z-index: 1;
  opacity: 1;
}

.forward-from-bottom-exit-active {
  z-index: 1;
  opacity: 0.3;
  transition: all 300ms;
}

.back-to-bottom-enter {
  z-index: 1;
  opacity: 0.3;
}

.back-to-bottom-enter-active {
  z-index: 1;
  opacity: 1;
  transition: all 300ms;
}

.back-to-bottom-exit {
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
}

.back-to-bottom-exit-active {
  z-index: 2;
  opacity: 0;
  transform: translateY(100%);
  transition: all 300ms;
}

/**
 * 左右滚动
 */
.forward-from-scroll-enter {
  z-index: 2;
  transform: translateX(100%);
}

.forward-from-scroll-enter-active {
  z-index: 2;
  transform: translateX(0);
  transition: all 300ms;
}

.forward-from-scroll-exit {
  z-index: 1;
  transform: translateX(0%);
}

.forward-from-scroll-exit-active {
  z-index: 1;
  transform: translateX(-100%);
  transition: all 300ms;
}

.back-to-scroll-enter {
  z-index: 1;
  transform: translateX(-100%);
}

.back-to-scroll-enter-active {
  z-index: 1;
  transition: all 300ms;
  transform: translateX(0%);
}

.back-to-scroll-exit {
  z-index: 2;
  transform: translateX(0%);
}

.back-to-scroll-exit-active {
  z-index: 2;
  transform: translateX(100%);
  transition: all 300ms;
}

/**
 * only fade
 */
.forward-from-fade-enter {
  z-index: 2;
  opacity: 0;
}

.forward-from-fade-enter-active {
  z-index: 2;
  opacity: 1;
  transition: all 300ms;
}

.forward-from-fade-exit {
  z-index: 1;
  opacity: 1;
}

.forward-from-fade-exit-active {
  z-index: 1;
  opacity: 0.3;
  transition: all 300ms;
}

.back-to-fade-enter {
  z-index: 1;
  opacity: 0.3;
}

.back-to-fade-enter-active {
  z-index: 1;
  opacity: 1;
  transition: all 300ms;
}

.back-to-fade-exit {
  z-index: 2;
  opacity: 1;
}

.back-to-fade-exit-active {
  z-index: 2;
  opacity: 0;
  transition: all 300ms;
}